<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" style="margin: 100px;">
			<parent></parent>
		</div>
		<template id="par">
			<div>
				<h1>{{parentMsg}}:{{message}}</h1>
				<child1 @change="getVal"></child1>
			</div>
		</template>
		<template id="cl">
			<div>
				<button @click="fn">
					点击传值父组件
				</button>
				<p>准备传递的数据:{{cMsg1}}</p>
			</div>
		</template>
		<script src="../vue.min.js"></script>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			components:{
				"parent":{
					template:"#par",
					data(){
						return{
							parentMsg:"父组件接收的信息",
							message:""
						}
					},
					methods:{
						getVal:function(val){
							this.message=val;
							console.log("接收的信息为:"+this.message);
						}
					},
					components:{
						"child1":{
							template:"#c1",
							data(){
								return{
									cMsg1:"1000"
								}
							},
							methods:{
								fn:function(){
									this.$emit("change",this.cMsg1);
								}
							}
						}
					}
				}
			}
		});
	</script>
</html>
